<!DOCTYPE html>
<html lang="zh">
<!--zh表示国区，如果是en(England)可能导致页面某些情况下出错-->
<head>
    <meta charset="UTF-8">
    <title>EkkoWeb</title>
    <link rel="stylesheet" type="text/css" href="css/Warp.css">
    <!-- 地址栏显示 -->
    <link rel="Shortcut Icon" href="log.ico" type="image/x-icon"/>
    <!-- 收藏栏也显示 -->
    <link rel="Bookmark" href="log.ico" type="image/x-icon"/>
</head>
<body>
<div class="Wrap">
    <!--    用于整个最底层页面的调试，后期可用于浮窗-->
    <div class="TopNav">
        <!--        顶部导航-->
        <div class="TopNavLeftBox">
            <!--            顶部状态栏左侧选择地区·-->
            <ul class="LeftList">
                <li class="List">
                    <span class="ListStyle">中原工学院</span>
                </li>
            </ul>
        </div>
        <div class="TopNavRightBox">
            <ul class="RightList">
                <li class="List"><span class="ListStyle">我的账户</span></li>
                <li class="List"><span class="ListStyle">购物车</span></li>
                <li class="List"><span class="ListStyle">我的收藏</span></li>
                <li class="List"><span class="ListStyle">商品分类</span></li>
            </ul>
        </div>
    </div>
    <div class="WrapMask1"></div>
    <div class="WrapMask2"></div>
    <div class="WrapIn">
        <!--        页面主体内容-->
        <div class="SearchBox">
            <!--            包含有LOGO和搜索栏-->

            <div class="SearchLogo"></div>
            <div class="SearchText">
                <div class="Function">
                    <button class="LeftSearchButton"></button>
                    <svg class="LeftSearchSvg"></svg>
                </div>
                <input class="SearchInput">
                <button class="RightSearchButton">
                    <span class="RightButtonText" alt="Search">搜索</span>
                </button>
            </div>
        </div>
        <div class="ContentBox">
            <!--            包含有顶部导航及下方左侧导航标题、右侧推荐购买品类-->
            <div class="ContentNav">
                <div class="SideNav">
                    <span class="SideNavTopic">产品分类</span>
                </div>
                <div class="MainNav">
                    <ul class="MainNavList">
                        <li class="MainNavText"><span class="MainNavSpan">推荐购买</span></li>
                        <li class="MainNavText"><span class="MainNavSpan">最近热销</span></li>
                        <li class="MainNavText"><span class="MainNavSpan">限量折扣</span></li>
                        <li class="MainNavText"><span class="MainNavSpan">最多购买</span></li>
                    </ul>
                </div>
            </div>
            <div class="ShopBox">
                <!--                包含有左侧品类导航栏，中间商品流动展示，右侧个人用户信息-->
                <div class="LeftShop">
                    <div class="LeftShopSort">
                        <ul class="LeftShopSortUl">
                            <li class="LeftShopSortText"><span class="LeftShopSortSpan">家用电器</span></li>
                            <li class="LeftShopSortText"><span class="LeftShopSortSpan">办公用品</span></li>
                            <li class="LeftShopSortText"><span class="LeftShopSortSpan">生活用品</span></li>
                            <li class="LeftShopSortText"><span class="LeftShopSortSpan">当季服装</span></li>
                            <li class="LeftShopSortText"><span class="LeftShopSortSpan">零食食品</span></li>
                            <li class="LeftShopSortText" style="border: none"><span class="LeftShopSortSpan">首饰饰品</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="MidShopShowBox">
                    <div class="MidShopShow">
                        <div class="ShopAD"></div>
                        <div class="ADText">
                            <span class="ADTextStyle">这里放置广告文字描述</span>
                        </div>
                    </div>
                </div>
                <div class="RightPrivateAccount">
                    <div class="RightMask">
                        <!--                        包含有上部头像及下部账户操作栏-->
                        <div class="AccountPicSpan">
                            <div class="AccountPic"></div>
                            <div class="AccountTextBox">
                                <div class="AccountTextSpan">Ekko.</div>
                                <!--                                这里放置用户昵称-->
                            </div>
                        </div>
                        <div class="BottomAccount">
                            <table class="AccountOperation">
                                <tr>
                                    <td class="OperationText">我的账户</td>
                                    <td class="OperationText">购物车</td>
                                </tr>
                                <tr>
                                    <td class="OperationText">我的收藏</td>
                                    <td class="OperationText">账户设置</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ShowGoodsBox">
            <div class="ShowGoodsBoxNav">
                <!--                展示商品导航-->
                <ul>
                    <li class="SideNavBlock">
                        <pre class="SideNavText">今日推荐 : </pre>
                    </li>
                </ul>
            </div>
            <div class="GoodBoxBlock">
                <!--                商品们-->
                <table class="TableShow">
                    <tr class="Line">
                        <td class="GoodsBlock">
                            <div class="GoodsPic">
                                <div class="AD_1"><div class="ADSPan">这里放置图片描述</div></div>
                            </div>
                        </td>
                        <td class="GoodsBlock">
                            <div class="GoodsPic">
                                <div class="AD_7"><div class="ADSPan">这里放置图片描述</div></div>
                            </div>
                        </td>
                        <td class="GoodsBlock">
                            <div class="GoodsPic">
                                <div class="AD_3"><div class="ADSPan">这里放置图片描述</div></div>
                            </div>
                        </td>
                    </tr>
                    <tr class="Line">
                        <td class="GoodsBlock">
                            <div class="GoodsPic">
                                <div class="AD_4"><div class="ADSPan">这里放置图片描述</div></div>
                            </div>
                        </td>
                        <td class="GoodsBlock">
                            <div class="GoodsPic">
                                <div class="AD_5"><div class="ADSPan">这里放置图片描述</div></div>
                            </div>
                        </td>
                        <td class="GoodsBlock">
                            <div class="GoodsPic">
                                <div class="AD_6"><div class="ADSPan">这里放置图片描述</div></div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <!--            推荐商品展示模块-->
        </div>
    </div>
    <div class="BottomBox">
        <!--        底部信息展示-->
        <div class="BottomRight">
            <button style="border: none" alt="shop"></button>
            <svg class="RightShop"></svg>
        </div>
    </div>
</div>
</body>
</html>